<template>
  <base-load-page :loadState="false" class="base-load-page">
    <div class="page-contnet">
      <div>
        <el-form ref="auditFormRef" :rules="rules" :model="filterData">
          <el-form-item v-for="(item, index) in iptList" :key="index" :label="item.name" labelWidth="200px" :prop="item.code">
            <el-input v-model="filterData[item.code]" :disabled="!!item.disable" style="width: 500px" :placeholder="`请输入${item.name}`"></el-input>
          </el-form-item>
        </el-form>
        <el-button style="width: 100%" type="success" :loading="loaging" :disabled="loaging" @click="onSubmit">开始联调</el-button>
      </div>
    </div>
  </base-load-page>
</template>

<script setup lang="ts">
  import { type OceMaterialRecordItem, type OceMaterialRecordReq, getToken, ocePromotionAddEverydayCensus, submitToken } from '@/api/marketing-management';
  import { formatNumberWithMoney } from '@/utils/numb';

  const loaging = ref(false);

  const rules = ref({
    promotionUrl: [{ required: true, message: '请输入推广URL', trigger: 'blur' }],
    token: [{ required: true, message: '请输入广告账户Token', trigger: 'blur' }],
    logidUrl: [{ required: true, message: '请输入URL标识', trigger: 'blur' }],
  });

  const auditFormRef = ref<ElFormInstance>();

  const { proxy } = getCurrentInstance() as any;

  const iptList = ref([
    {
      code: 'token',
      name: '广告账户Token',
    },
    {
      code: 'logidUrl',
      name: 'URL标识',
    },
    {
      code: 'promotionUrl',
      name: '推广URL',
    },
  ]);

  const filterData = ref<OceMaterialRecordReq>({
    promotionUrl: '',
    logidUrl: '',
    token: '',
  });

  const onSubmit = () => {
    auditFormRef.value?.validate(async (valid: boolean) => {
      if (valid) {
        try {
          const res = await submitToken({
            ...filterData.value,
          });

          if (!res.code) {
            ElToast.error(res.msg);
          } else {
            ElToast.success(res.msg);
          }
        } catch (e) {
          if (!e.code) {
            ElToast.error(e.msg);
          } else {
            ElToast.success(e.msg);
          }
        }
      }
    });
  };

  onMounted(() => {
    // filterData.value.currentDate = proxy.$dayjs().format('YYYY-MM-DD');
    getTokens();
  });

  const getTokens = async () => {
    const { data } = await getToken();

    for (const i in data) {
      filterData.value[i] = data[i];
    }
  };
</script>

<style lang="scss" scoped>
  .pagination-box {
    @include flex(row, nowrap, center, center, center);
    padding-top: 15px;
  }

  .head-box {
    @include flex(row, nowrap, flex-start, center, center);

    .left-box {
      display: flex;
      flex: 1;
      flex-wrap: wrap;
      // grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      // grid-gap: 15px;
      gap: 14px;
      // display: grid;
      align-items: center;
      margin-right: 15px;
    }
  }

  .page-contnet {
    display: flex;
    place-content: center center;
    align-items: center;
    width: 100%;
    height: 100%;
  }

  .page-contnet .form-item {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 20px;
  }

  .el-input-group__append {
    display: none !important;
  }

  .page-contnet .form-item .label {
    width: 150px;
  }

  .content-wrap {
    white-space: wrap;
  }
</style>
